import { store } from "@/store.js";
function chartTimelineGridRowCellTemplate({
  className,
  styleMap,
  cache,
  shouldDetach,
  actions,
  slots,
  html,
  vido,
  props,
}) {
  const detach = shouldDetach || !props || !props.id;
  const color = ["", " color1", " color2", " color3"," color4"," color5"," color6"];
  return cache(
    detach
      ? null
      : slots.html(
          "outer",
          html`
            <div
              class=${props.row.level
                ? className + color[props.row.level]
                : className}
              data-gstcid=${props.id}
              data-actions=${actions()}
              style=${styleMap.directive()}
            >
              ${slots.html("content", (props && props.content) ?? null)}
            </div>
          `
        )
  );
}
function chartTimelineItemsRowItemTemplate({
  className,
  labelClassName,
  styleMap,
  cache,
  shouldDetach,
  cutterLeft,
  cutterRight,
  getContent,
  actions,
  slots,
  html,
  vido,
  props,
}) {
  const myclick = () => {
    state.update("config.list.rows", (old) => {
      for (let i in old) {
        console.log(i, props.row.id);
        if (i === props.row.id && !old[i].isSelect) {
          state.update("config.chart.items", (a) => {
            for (let i in a) {
              if (i === props.row.id && !a[i].isSelect) {
                a[i].isSelect = true;
                a[i].style.backgroundColor = "red";
              } else {
                a[i].isSelect = false;
                a[i].style.backgroundColor = "#7E349D";
              }
            }
            return a;
          });
          old[i].isSelect = true;
        } else if (i === props.row.id && old[i].isSelect) {
          state.update("config.chart.items." + i, (a) => {
            a.isSelect = false;
            a.style.backgroundColor = "#7E349D";
            return a;
          });
          old[i].isSelect = false;
        } else {
          old[i].isSelect = false;
        }
      }
      return old;
    });
  };
  const detach = shouldDetach || !props || !props.item;
  return cache(
    detach
      ? null
      : slots.html(
          "outer",
          html`
            <div
              @click=${myclick}
              class=${className}
              data-gstcid=${props.item.id}
              data-actions=${actions()}
              style=${styleMap.directive()}
            >
              ${slots.html(
                "inner",
                html`
                  ${cutterLeft()}
                  <div class=${labelClassName}>
                    ${slots.html("content", getContent())}
                  </div>
                  ${cutterRight()}
                `
              )}
            </div>
          `
        )
  );
}
function chartTimelineItemsTemplate({
  className,
  styleMap,
  rowsComponents,
  actions,
  slots,
  html,
  vido,
  props,
}) {
  return slots.html(
    "outer",
    html`
      <div
        class=${className}
        style=${styleMap.directive()}
        data-actions=${actions()}
      >
        ${slots.html(
          "content",
          rowsComponents.map((r) => r.html())
        )}
      </div>
    `
  );
}
function listColumnRowTemplate({
  classNameCurrent,
  classNameContent,
  styleMap,
  cache,
  shouldDetach,
  content,
  ListColumnRowExpander,
  slots,
  actions,
  html,
  vido,
  props,
}) {
  const detach = shouldDetach || !props || !props.column;
  const myclick = (e) => {
    state.update("config.list.rows", (old) => {
      for (let i in old) {
        if (i === props.row.id && !old[i].isSelect) {
          state.update("config.chart.items", (a) => {
            console.log(a[i]);
            for (let i in a) {
              if (i === props.row.id && !a[i].isSelect) {
                a[i].isSelect = true;
                a[i].style.backgroundColor = "red";
              } else {
                a[i].isSelect = false;
                a[i].style.backgroundColor = "#7E349D";
              }
            }
            return a;
          });
          old[i].isSelect = true;
        } else if (i === props.row.id && old[i].isSelect) {
          state.update("config.chart.items." + i, (a) => {
            a.isSelect = false;
            a.style.backgroundColor = "#7E349D";
            return a;
          });
          old[i].isSelect = false;
        } else {
          old[i].isSelect = false;
        }
      }
      return old;
    });
  };
  const dbClick = (e) => {
    store.isModelShow = true;
    store.rowData = props.row;
  };
  return cache(
    detach
      ? null
      : slots.html(
          "outer",
          html`
            <div
              @click=${myclick}
              @dblclick=${dbClick}
              class=${props.row.isSelect
                ? classNameCurrent + " myselected"
                : classNameCurrent}
              data-gstcid=${props.row.id}
              style=${styleMap.directive()}
              data-actions=${actions()}
            >
              ${slots.html(
                "inner",
                html`
                  ${props.column.expander ? ListColumnRowExpander.html() : null}

                  <div class=${classNameContent}>
                    ${slots.html("content", content)}
                  </div>
                `
              )}
            </div>
          `
        )
  );
}
export {
  chartTimelineGridRowCellTemplate,
  listColumnRowTemplate,
  chartTimelineItemsTemplate,
  chartTimelineItemsRowItemTemplate,
};
